<template>
    <!-- <tm-app class="app">
        <view :style="{ top: systemInfo.statusBarHeight + 'px' }" class="content">

            <view class="header" :style="{ height: systemInfo.statusBarHeight + 'px' }">
            <image src="../../static/firends/right.png" class="right"></image>
            <text class="firend">评价</text>
            <view class="shuoming">说明</view>
        </view>
            <scroll-view :scroll-y="true" class="count" @scrolltolower="scrolltolower" :refresher-threshold="100"
                refresher-enabled="false" @refresherrefresh="refresherrefresh" :refresher-triggered="triggered"
                
                >
                <view class="nodata" v-show="!state.list.length">
                    <image class="nodata-img" src="/static/img/nodata.png" alt="" />
                </view>
                <view class="rate-list" v-for="(item, index) in state.list" :key="index">
                    <view class="rate-info">
                        <view class="rate-user">
                            <view class="avticer">
                                <image :src="myAppraise.photo" class="touxiang"></image>
                                <image src="../../static/rate/svip.png" class="svip" v-if="myAppraise.isVip == 0 ? false : true">
                                </image>
                            </view>
                            <view class="rate-name">
                                <view class="rate-age">
                                    <view class="rate-xing">
                                        <image src="../../static/center/nv.png" class="nv"></image>
                                        28
                                    </view>
                                    <view class="name" :class="myAppraise.isVip === 0 ? 'nvip' : ''">{{ myAppraise.userName }}</view>
                                </view>
                                <view class="diqu">IP属地：陕西</view>
                            </view>
                        </view>
                        <view class="rate-xian"></view>
                        <view class="rate-pinjia">
                            <image :src="playurl(myAppraise.score)" class="happy"></image>
                            <view class="pingjia-name"> {{ playtext(myAppraise.score) }}</view>
                        </view>
                    </view>
                    <view class="rate-count">
                        <view class="rate-time">
                            {{ myAppraise.createTime }}
                        </view>
                        <view class="rate-text">
                            <text>
                                {{ myAppraise.comment }}
                            </text>
                        </view>
                        <view class="rate-img" v-show="myAppraise.imageUrl">
                            <image :src="num" class="touxiang" v-for="(num, index) in myAppraise.imageUrl?.split(',')"></image>

                        </view>
                    </view>
                </view>

            </scroll-view>

            <view class="btn" @click="onLinkcomment">
                评价
            </view>
        </view>
    </tm-app> -->
    <tm-app class="createCircle">
        <view
            style="
                width: 750rpx;
                position: fixed;
                z-index: 100;
                background: #fff;
            "
            :style="{
                height: systemInfo.statusBarHeight + 'px',
            }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title">我的评价</view>
            <!-- <view class="right_box" style="font-weight: normal" @tap="dialogVisible=true">说明</view> -->
        </view>


        <view
            class="content1"
            :class="{hasBtnShow}"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
                <view
                    class="rate-list"
                >
                    <view class="rate-info">
                        <view class="rate-user">
                            <view class="avticer">
                                <userhead width="100" height="100" :saveKey="myAppraise.userId" :isVip="myAppraise.isVip" :src="myAppraise.photo"/>
                            </view>
                            <view class="user-name">
                                <view class="name-age">
                                    <sexage style="margin-right:10rpx;" :sex="myAppraise.sex" :age="myAppraise.age"/>
                                    <view class="name">{{
                                        myAppraise.userName
                                    }}</view>
                                </view>
                                <view class="d-flex a-center j-between">
                                    <view>
                                        <view
                                            class="d-flex a-center"
                                            style="margin-top: 6rpx; gap: 10rpx"
                                        >
                                            <view class="user-id"
                                                >IP属地:
                                                {{ myAppraise.province }}</view
                                            >
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="rate-xian"></view>
                        <view class="rate-pinjia d-flex d-c a-center">
                            <image
                                :src="playurl(myAppraise.score)"
                                class="happy"
                            ></image>
                            <view class="pingjia-name">
                                {{ playtext(myAppraise.score) }}</view
                            >
                        </view>
                    </view>
                    <view class="rate-count">
                        <view class="rate-time">
                            {{ myAppraise.createTime }}
                        </view>
                        <view class="rate-text">
                            <text>
                                {{ myAppraise.comment }}
                            </text>
                        </view>
                        <view class="rate-img" v-show="myAppraise.imageUrl">
                            <image
                                :src="num"
                                class="touxiang"
                                v-for="(num, index) in myAppraise.imageUrl?.split(
                                    ','
                                )"
								@tap="previewImage('preview',index,imageConvertArray(myAppraise.imageUrl))" :id="`preview${index}`"
                            ></image>
                        </view>
                    </view>
                </view>



        </view>
    </tm-app>
	<imagePreview ref="preview" @onChange="imageChange"></imagePreview>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, handleError } from "vue";
import {
    onReady,
    onShow,
    onLoad,
    onReachBottom,
    onPageScroll,
} from "@dcloudio/uni-app";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { userData as userDataStore } from "@/store/userData";
import { userAppraise, couldAppraise } from "@/api/api";
import { showLoading, closeLoading, wait } from "@/utils/utils";
import cacheimg from "@/components/cacheimg.vue";
import sexage from '@/components/sexage.vue'
import userhead from '@/components/userhead.vue'
import imagePreview from "@/components/imagePreview.vue";
import {imageConvertArray,getHDImages} from '@/utils/format';

const userData: any = userDataStore();
const systemInfo: any = systemInfoStore();
const  goBack = () => {
	uni.navigateBack();
};

const toUserid = ref('')
const triggered: any = ref(false);
const opacityNum: any = ref(0); //响应式
const playurl: any = computed(() => {
    return (item: any) => {
        if (item == 1) {
            return "/static/rate/bab.png";
        } else if (item == 2) {
            return "/static/rate/sm.png";
        } else {
            return "/static/rate/happy.png";
        }
    };
});
const playtext: any = computed(() => {
    return (item: any) => {
        if (item == 1) {
            return "极差的";
        } else if (item == 2) {
            return "不错";
        } else {
            return "惊艳的";
        }
    };
});
onLoad((options: any) => {
    toUserid.value = options.toUserid; // 被评价人id
});
onShow(() => {
    CouldAppraise();
});


const myAppraise = ref({})


const CouldAppraise = async () => {
    const params = {
        userId: userData.id,
        toUserId: toUserid.value,
    };

    const res: any = await couldAppraise(params);
    const { flag, data } = res;
    if (flag === 1) {
        myAppraise.value = data.data;
    }
};
//图片预览
const preview = ref();
const previewImage = (id:string,index:number,urls:any) => {
	uni.createSelectorQuery().select(`#${id}${index}`).boundingClientRect().exec((ret)=>{
		//e.callback(ret[0])
		let params = {
			startInfo:[ret[0]],//图片的初始大小与位置
			idPre:id,
			index:index,//当前图片地址
			urls:getHDImages(urls),//预览集合图片地址
		}
		preview.value.open(params);
	});
}
const imageChange = (e:any) => {
	console.log("进入")
	try{
		uni.createSelectorQuery().select(`#${e.id}${e.index}`).boundingClientRect().exec((ret)=>{
			uni.$emit("imagePreviewUpdate",ret[0])
		});
	}catch(e){
		uni.$emit("imagePreviewUpdate",null)
	}
}
</script>

<style lang="scss" scoped>
.btn_main {
    position: fixed;
    display: block;
    height: 80rpx;
    border-radius: 40rpx;
    line-height: 80rpx;
    bottom: calc(constant(safe-area-inset-bottom));
    bottom: calc(env(safe-area-inset-bottom));
    z-index: 100;
}

.createCircle {
    position: relative;
    width: 750rpx;
    height: 100%;
    .nomore {
        width: 100%;
        height: 100rpx;
        color: #999;
    }

    .ask {
        width: 32rpx;
        height: 32rpx;
        margin-left: 5rpx;
    }

    .content1 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        &.hasBtnShow{
            bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
            bottom: calc(env(safe-area-inset-bottom) + 120rpx);
        }
    }

    .scr {
        flex: 1;
    }

    .rate-list {
        width: 710rpx;
        background: #ffffff;
        border-radius: 20rpx;
        margin: 20rpx auto;
        overflow: hidden;

        .rate-info {
            height: 140rpx;
            background: #ffffff;
            box-shadow: 1rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;

            .rate-xian {
                width: 2rpx;
                height: 70rpx;
                background: #f5f5f5;
            }

            .rate-pinjia {
                /*margin-left: 58rpx;*/
				flex: 1;

                .happy {
                    width: 64rpx;
                    height: 64rpx;
                }

                .pingjia-name {
					padding-top: 10rpx;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #666666;
                }
            }

            .rate-user {
                display: flex;
                align-items: center;
                width: 512rpx;

                height: 140rpx;

                .user-name {
                    margin-left: 20rpx;

                    .name-age {
                        display: flex;
                        align-items: center;

                        .age {
                            padding: 0 10rpx;
                            height: 30rpx;
                            border-radius: 15rpx;
                            font-size: 24rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #ffffff;
                            line-height: 30rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-right: 10rpx;

                            .icon {
                                font-size: 30rpx;
                            }

                            &.woman {
                                background: #ff84cc;
                            }

                            &.man {
                                background: #8498ff;
                            }
                        }

                        .name {
                            height: 45rpx;
                            font-size: 32rpx;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 600;
                            color: #f19945;
                            line-height: 45rpx;
                        }
                    }

                    .user-id {
                        height: 33rpx;
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                        text-align: left;
                    }

                    .real_name {
                        padding: 2rpx 5rpx;
                        font-size: 18rpx;
                        border: 1px solid #999;
                        border-radius: 6rpx;
                        color: #999;
                        &.real {
                            border: 1px solid $slim-main;
                            color: $slim-main;
                        }
                    }
                }

                .avticer {
                    position: relative;
                    width: 100rpx;
                    height: 100rpx;
                    margin-left: 20rpx;

                    .touxiang {
                        display: block;
                        width: 100%;
                        border-radius: 50%;
                        border: 3rpx solid #ffffff;

                        height: 100%;
                    }

                    .svip {
                        position: absolute;
                        width: 97rpx;
                        height: 43rpx;
                        bottom: -10rpx;
                        left: 0;
                        right: 0;
                        margin: auto;
                    }
                }

                .rate-name {
                    display: flex;
                    flex-direction: column;
                    margin-left: 20rpx;

                    .diqu {
                        font-size: 24rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                    }

                    .rate-age {
                        display: flex;
                        align-items: center;

                        .rate-xing {
                            width: 70rpx;
                            height: 30rpx;
                            background: #ff84cc;
                            border-radius: 15rpx;
                            font-size: 24rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #ffffff;
                            line-height: 30rpx;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            .nv {
                                width: 27rpx;
                                height: 27rpx;
                            }
                        }

                        .agebag {
                            background: #8498ff;
                        }

                        .name {
                            margin-left: 8rpx;
                            height: 45rpx;
                            font-size: 32rpx;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 600;
                            color: #f19945;
                            line-height: 45rpx;
                        }

                        .nvip {
                            color: #333333;
                        }
                    }
                }
            }
        }

        .rate-count {
            width: 100%;
            padding: 0 20rpx 20rpx 20rpx;
            box-sizing: border-box;

            .rate-time {
                height: 60rpx;
                line-height: 60rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
            }

            .rate-text {
                width: 100%;
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
            }

            .rate-img {
                margin-top: 10rpx;
                display: grid;
                grid-template-columns: repeat(3, 210rpx);
                grid-gap: 20rpx 20rpx;

                .touxiang {
                    width: 210rpx;
                    height: 210rpx;
                    border:1px solid #f5f5f5;
                    border-radius: 20rpx;
                }
            }
        }
    }

}


.uni-easyinput__content {
    background-color: #f5f5f5 !important;
    padding: 0 20rpx;
}

.uni-textarea-textarea {
    font-size: 30rpx !important;
    color: $slim-text3;
}

.uni-picker-container .uni-picker-action.uni-picker-action-confirm {
    color: #1dc691 !important;
}

.uni-picker-container .uni-picker-item {
    color: #1dc691 !important;
}
</style>